<template>
  <div class="partschollIndex">
    <Aside></Aside>
    <Header :title="title" @toggleMenu="toggleMenu" @navToBack="navToBack">
    </Header>
    <div class="secetion">
      <!--切换tab-->
      <div class="partTab">
        <router-view ></router-view>
      </div>
    </div>
    <div class="weui-tabbar">
      <a  class="weui-tabbar__item " v-for="(item,index) in menus" :class="{'weui-bar__item_on':defaultIndex ===index}" @click.stop="choiseRouter(index)">
          <router-link :to="{name:item.path}">
               <span style="display: inline-block;position: relative;">
                     <img :src=item.activeIcon alt="" class="weui-tabbar__icon" v-if="defaultIndex ===index">
                     <img :src=item.Icon alt="" class="weui-tabbar__icon" v-else>
                </span>
            <p class="weui-tabbar__label">{{item.name}}</p>
          </router-link>
      </a>
    </div>
  </div>
</template>
<script >
  import {mapState} from 'vuex'
  import aside from '../../components/aside.vue'
  import header from '../../components/header.vue'
  export default({
    data (){
      return {
        title:'微党校',
        defaultIndex:0,
        menus:[
          {
              path:'partIndex',
              name:'党校',
              activeIcon:'https://api.cloudcpc.com/static/index/images/partSchollActive.png',
              Icon:'https://api.cloudcpc.com/static/index/images/partScholl.png'
          },
          {
            path:'partcourse',
            name:'选课',
            activeIcon:'https://api.cloudcpc.com/static/index/images/allActive.png',
            Icon:'https://api.cloudcpc.com/static/index/images/all.png'
          },
          {
            path:'mine',
            name:'我的',
            activeIcon:'https://api.cloudcpc.com/static/index/images/mineActive.png',
            Icon:'https://api.cloudcpc.com/static/index/images/mine.png'
          }
        ]
      }
    },
    components:{
      Aside:aside,
      Header:header
    },
    methods:{
      navToBack(){
        this.$router.go(-1);//返回上一层
      },
      choiseRouter (index){
          this.defaultIndex =index
      },
      toggleMenu(){
        $('.aside').toggleClass('active')
        $('body').toggleClass('active')
        if($('.aside').hasClass('active')){
          $('#toggleBtn').find('.img2').hide()
          $('#toggleBtn').find('.img1').show()
        }else{
          $('#toggleBtn').find('.img1').hide()
          $('#toggleBtn').find('.img2').show()
        }
      },
      loadMore (){
        this.loadmoreClick =!this.loadmoreClick
      },
      choiseHead(index){
        this.defaultIndex =index
      }
    },
    mounted (){
      $('body').removeClass('active')
//      console.log('~~~~~~~~~~~')
//      console.log(this.$route.path)
//      console.log(this.defaultIcon)
      this.defaultIndex =this.defaultIcon
    },
    computed:{
      ...mapState({
        defaultIcon:state=>state.app.partScholl.defaultIcon
      })
    }
  })
</script>
<style scoped="">
  body,html{
    background: #f9f5f5;
  }
  #app{
    height: 100%;
    width: 100%;
  }
  .partschollIndex{
    height: 100%;
    width: 100%;
  }
  .partTab{
    margin-top: 0.8rem;
    padding-bottom: 40px;
  }
 .aside >>>  .loginAreaBtn{
    height: calc(100% - 9rem ) !important;
    text-align: center;
    position: relative;
  }
  /*tabBar*/
  .weui-tabbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #F7F7FA;
    max-width: 7.5rem;
    margin: 0 auto;
    z-index: 999;
  }
  .weui-tabbar:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #C0BFC4;
    color: #C0BFC4;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .weui-tabbar__item {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 5px 0 0;
    font-size: 0;
    color: #808080;
    text-align: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .weui-tabbar__label {
    text-align: center;
    color: #808080;
    font-size: 10px;
    line-height: 1.8;
  }
  .weui-tabbar__icon {
    display: inline-block;
    width: 0.44rem;
    height: 0.44rem;
  }
  .weui-bar__item_on .weui-tabbar__label{
    color: #e83329 !important;
  }
  .partTab{
    position: relative;
     height: calc(100% - 0.8rem - 40px);
    overflow-y: scroll;
  }

</style>
